<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-07-14 14:23:14
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-07-17 11:52:25
 * @FilePath: \出口卖家端\src\views\IndividualCenter\PaymentPassword\components\ChangePassword.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="verify">
    <div class="title">请设置支付密码，不能是连续数字，用于会员</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="top"
      status-icon
      hide-required-asterisk
    >
      <el-form-item label="设置会员支付密码" prop="newPwd" class="mb-30">
        <c-payment-code
          type="text"
          class="wh"
          v-model="ruleForm.password"
          prop="newPwd"
        />
      </el-form-item>
      <el-form-item label="再次确认支付密码" prop="cPwd" class="mb-40">
        <c-payment-code
          type="password"
          class="wh"
          v-model="ruleForm.cfPassword"
          prop="cPwd"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="disabled"
          @click="handleNext"
          size="large"
          class="wh"
          type="primary"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted, computed } from "vue";
import cPaymentCode from "@/components/Form/PaymentCode.vue";
import { Lock } from "@element-plus/icons-vue";
import { deepClone } from "@/utils/index";
const ruleForm = ref({});
const ruleFormRef = ref();
const loading = ref(false);
const { proxy } = getCurrentInstance();
const emit = defineEmits(["change"]);
onMounted(() => {
  proxy.$mitt.on("formEvent", (res) => {
    ruleForm.value = res;
  });
});
const disabled = computed({
  get: () => {
    if (
      ruleForm.value.password &&
      ruleForm.value.password.length === 6 &&
      ruleForm.value.cfPassword &&
      ruleForm.value.cfPassword.length === 6
    ) {
      return false;
    }
    return true;
  },
});
const handleNext = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        url: "/seller/setPayPwd",
        data: deepClone(ruleForm.value),
      };
      loading.value = true;
      proxy.$post(params).then(
        (res) => {
          proxy.$get({ url: "/seller/detail" }).then((user) => {
            setLocalStorage("USER_INFO", user);
            loading.value = false;
            emit("change");
          });
        },
        () => {
          emit("change", 0);
          loading.value = false;
        }
      );
    }
  });
};
const rules = ref({
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  cfPassword: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请再次确认密码"));
        } else if (ruleForm.value.password !== value) {
          callback(new Error("两次密码输入不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});
</script>
<style lang="less" scoped>
.verify {
  width: 366px;
  margin-top: 70px;
  margin-left: auto;
  margin-right: auto;
  .title {
    font-size: 14px;
    color: #575757;
    margin-bottom: 50px;
  }
}
</style>